<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div>
          <el-card>
            <div class="user">
              <span>化</span>
              <div class="userInfo">
                <p div class="name">{{ userInfo.account }}</p>
                <p div class="access">化验员</p>
              </div>
            </div>
            <div class="loginInfo">
              <p>
                省市信息：<span
                  >{{ userInfo.province }}省{{ userInfo.prefecture }}市{{
                    userInfo.sea_area
                  }}海域</span
                >
              </p>
              <p>
                监测点信息：<span>{{ userInfo.monitor_point_code }}</span>
              </p>
            </div>
          </el-card>
          <el-card style="margin-top: 20px" class="data-table">
            <span class="table-title">有机分析指标</span>
            <el-table
              :data="monitor_data(constant.organic, today_monitor_data.organic)"
              style="width: 100%"
            >
              <el-table-column prop="m-items" label="监测项"> </el-table-column>
              <el-table-column prop="m-results" label="监测结果">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-card class="data-table">
            <span class="table-title">理化分析指标</span>
            <el-table
              :data="monitor_data(constant.PhCh, today_monitor_data.PhCh)"
              style="width: 100%"
            >
              <el-table-column prop="m-items" label="监测项"> </el-table-column>
              <el-table-column prop="m-results" label="监测结果">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-card class="data-table">
            <span class="table-title">金属分析指标</span>
            <el-table
              :data="monitor_data(constant.metal, today_monitor_data.metal)"
              style="width: 100%"
            >
              <el-table-column prop="m-items" label="监测项"> </el-table-column>
              <el-table-column prop="m-results" label="监测结果">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {},
      todayTime: "",
      today_monitor_data: {},

    };
  },
  created() {
    this.getUserInfo();
    this.todayTime = this.common.getTodayTime();
    this.getTodayMonitorData();
  },
  mounted() {},
  computed: {
    monitor_data() {
      return function (constData, todayData) {
        let monitorData = [];
        for (let i in todayData) {
          if (constData[i]) {
            monitorData.push({
              "m-items": constData[i],
              "m-results": todayData[i],
            });
          }
        }
        return monitorData;
      };
    },
  },
  methods: {
    getUserInfo() {
      this.$axios({
        url: "getUserInfo",
        params: this.$store.state.userInfo,
      })
        .then((res) => {
          let user_info = Object.assign(res.data, {
            account: this.$store.state.userInfo.account_number,
            monitor_point_code: this.$store.state.userInfo.monitor_point_code,
          });
          this.userInfo = user_info;
        })
        .catch((err) => err);
    },
    getTodayMonitorData() {
      this.$axios({
        url: "getTodayMData",
        params: {
          today: this.todayTime,
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
        },
      })
        .then((res) => {
          this.today_monitor_data = res.data;
        })
        .catch((err) => err);
    },
  },
};
</script>
<style lang='less' scoped>
.user {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;

  span {
    line-height: 120px;
    color: #fff;
    font-size: 60px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-right: 40px;
    background-color: steelblue;
  }

  .userInfo {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999999;
    }
  }
}

.loginInfo {
  p {
    line-height: 28px;
    font-size: 18px;
    color: #999999;

    span {
      color: #666666;
      margin-left: 10px;
    }
  }
}
.data-table {
  .table-title {
    font-size: 20px;
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(204, 204, 204, 0.5);
  }
}
</style>
